<template>
	<view class="wrap">
		<!-- 搜索栏 -->
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search" />
		</view>
		<!-- 标签 -->
		<u-tabs :list="list" :is-scroll="false" :current="current" @change="change" />
		<!-- 好友栏 -->
		<view v-if="current === 0">
			<scroll-view class="scroll-list msg-list-item" scroll-y="true" @scroll="showScroll">
				<view class="list-cell" v-for="(item, index) in friendList" :key="index" @click="navTo(0,index)">
					<image class="user-images" :src="item.avatar" />
					<view class="user-name">
						<span>{{item.nickname}}</span>
						<span class="user-other">{{getRole(item.rid)}}</span>
					</view>
				</view>
				<u-divider>已经到底了</u-divider>
			</scroll-view>
		</view>
		<!-- 关注栏 -->
		<view v-if="current === 1">
			<scroll-view class="scroll-list msg-list-item" scroll-y="true">
				<view class="list-cell" v-for="(item, index) in focusList" :key="index" @click="navTo(1,index)">
					<image class="user-images" :src="item.avatar" />
					<view class="user-name">
						<span>{{item.nickname}}</span>
						<span class="user-other">{{getRole(item.rid)}}</span>
					</view>
				</view>
				<u-divider>已经到底了</u-divider>
			</scroll-view>
		</view>
		<!-- 粉丝栏 -->
		<view v-if="current === 2">
			<scroll-view class="scroll-list msg-list-item" scroll-y="true">
				<view class="list-cell" v-for="(item, index) in fansList" :key="index" @click="navTo(2,index)">
					<image class="user-images" :src="item.avatar" />
					<view class="user-name">
						<span>{{item.nickname}}</span>
						<span class="user-other">{{getRole(item.rid)}}</span>
					</view>
				</view>
				<u-divider>已经到底了</u-divider>
			</scroll-view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				keywords: '',
				list: [{
					name: '好友',
				}, {
					name: '关注'
				}, {
					name: '粉丝',
				}],
				current: 0,
				scroll: 0,
				friendList: [],
				focusList: [],
				fansList: []
			};
		},
		onLoad() {
			// 获取好友信息
			this.$u.api.user.findFriend()
				.then(res => {
					if (res.code === 200) {
						this.friendList = res.data
						this.$u.vuex('friendList', res.data)
					}
				});
			// 获取粉丝信息
			this.$u.api.user.findFocus()
				.then(res => {
					if (res.code === 200) {
						this.focusList = res.data
						this.$u.vuex('focusList', res.data)
					}
				});
			// 获取关注信息
			this.$u.api.user.findFans()
				.then(res => {
					if (res.code === 200) {
						this.fansList = res.data
						this.$u.vuex('fansList', res.data)
					}
				});
		},
		methods: {
			change(index) {
				this.current = index;
				this.scroll = 0
			},
			navTo(type, index) {
				console.log(type + ':' + index)
				uni.navigateTo({
					url: '/pages/sys/book/personal-details?type=' + type + '&uid=' + index
				});
			},
			search(value) {
				this.$u.toast('搜索内容为：' + value)
			},
			getRole(rid) {
				if (rid === 101) {
					return '普通用户'
				} else if (rid === 102) {
					return '教练'
				} else if (rid === 103) {
					return '场馆'
				}
			}
		},
	};
</script>

<style lang="scss">
	@import '../../../common/uni.css';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.u-dropdown {
		background: #ffffff;
	}

	.msg-time {
		font-size: 26rpx;
		padding: 5px 0;
		color: #999999;
		text-align: center;
	}

	.u-card__foot {
		.u-icon {
			margin-right: 10px;
		}
	}

	.apply-text {
		font-size: 28rpx;
		color: #333333;

		span {
			color: #999999;
		}
	}

	.user-images {
		width: 80rpx;
		height: 80rpx;
		margin-right: 20px;
		border-radius: 50%;
	}

	.apply-list-foot {
		font-size: 28rpx;
		justify-content: space-around;
	}

	.personnel-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.personnel-user {
			position: relative;
			margin: 5px 9px 0;
		}

		.user-images {
			width: 32px;
			height: 32px;
			margin-right: 0;

		}

		.iconfont {
			position: absolute;
			top: -12px;
			right: -5px;
			color: #FE0100;
		}
	}

	.agree-text {
		color: #4094ff;
	}

	.refuse-text {
		color: #ff4400;
	}

	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 8px 24rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		line-height: 24px;
		background-color: #fff;
		align-items: center;
		border-bottom: 1px solid #ececec !important;
	}

	.user-name {
		font-size: 32rpx;
		color: #000000;
		flex: 1;

		span {
			display: block;
		}

		.user-other {
			font-size: 26rpx;
			color: #999999;
			font-weight: normal;
		}
	}
</style>
